<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/jquery-1.10.1.min.js"></script>
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 1000px;
            height: 500px;
            margin-top: 20px;
            margin-left: 10px;
            border: 1px solid #000;
            position: relative;
        }

        .box {
            width: 100px;
            height: 100px;
            position: absolute;
            left: 0;
            background-color: rgb(212, 139, 139);
        }
    </style>
</head>

<body>
    <div class="buttons">
        <button>开始</button>
        <button>链式</button>
        <button>stop(false,false)</button>
        <button>stop(false,true)</button>
        <button>stop(true,true)</button>
        <button>stop(true,false)</button>
        <button>完成</button>
        <button>hide</button>
        <button>show</button>
        <button>slideUp</button>
        <button>slideDown</button>
        <button>slideToggle</button>
        <button>fadeOut</button>
        <button>fadeIn</button>
        <button>fadeToggle</button>
        <button>fadeTo</button>
    </div>
    <div class="wrap">
        <div class="box"></div>
    </div>
</body>
<script>
    // animate(params,time,callback)
    // params: 接收一个对象(一组包含作为动画属性和终值的样式属性和及其值的集合){attr:end}
    // speed：三种预定速度之一的字符串("slow","normal","fast")默认normal
    // time:运动时间
    // callback：运动结束之后执行的回调函数
    $("button").eq(0).click(function () {
        $(".box").animate({ left: 1000, top: 500 }, 1000, function () {
            console.log("运动结束");
        })
    })

    // 复杂链式   (回调函数的链式运动)
    // $("button").eq(1).click(function () {
    //     $(".box").animate({ left: 1000 }, 1000, function () {
    //         $(".box").animate({ top: 500 }, 1000, function () {
    //             $(".box").animate({ left: 0 }, 1000, function () {
    //                 $(".box").animate({ top: 0 }, 1000, function () {
    //                     console.log("运动结束");
    //                 })
    //             })
    //         })
    //     })
    // })

    // 升级版   (jQuery对象的链式运动)
    $("button").eq(1).click(function () {
        $(".box").animate({ left: 1000 }, 1000).animate({ top: 500 }, 1000).animate({ left: 0 }, 1000).animate({ top: 0 }, 1000, function () {
            console.log("运动结束");
        })
    })



    // stop(clearQueue,jumpToEnd):停止所有在指定元素上运动的动画
    // 动画队列  [{ left: 1000 },{ top: 500 },{ left: 0 },{ top: 0 }]
    // clearQueue  是否清空队列
    // true         清空     本次动画结束后,后续动画不再执行
    // false(默认)  不清空   跳过本次,进入到下一次

    // jumpToEnd  是否立即完成动画(到达本次终点)
    // true         立即到达终点
    // false(默认)  不立即到达终点，停留在当前位置

    $("button").eq(2).click(function () {
        // false false  点击时从该位置出发到下一动画
        $(".box").stop();  // 默认
    })

    $("button").eq(3).click(function () {
        // false true  点击时立即从到达本次动画终点然后开始下一动画
        $(".box").stop(false, true);
    })

    $("button").eq(4).click(function () {
        // true true  点击时立即从到达本次动画终点然后清空后面所有动画
        $(".box").stop(true, true);
    })

    $("button").eq(5).click(function () {
        // true false  点击时立即立即停在当前位置
        $(".box").stop(true, false);
    })



    // finish()   停止当前正在运动的动画，删除所有排队的动画，直接到达终点
    $("button").eq(6).click(function () {
        $(".box").finish();
    })


    // 出现隐藏效果

    // hide([speed = 0, callback]) 
    //   
    $("button").eq(7).click(function () {
        // $(".box").hide()  默认        
        $(".box").hide(1000, function () {
            console.log("隐藏完毕");
        })
    })


    // show([speed = 0, callback]) 
    $("button").eq(8).click(function () {
        // $(".box").show()  默认        
        $(".box").show(1000, function () {
            console.log("显示完毕");
        });
    })

    // 滑动效果

    // slideUp([spped=0,callback])   上滑(折叠)
    $("button").eq(9).click(function () {
        $(".box").slideUp();
    })
    // slideDown([spped=0,callback])  下滑(展开)
    $("button").eq(10).click(function () {
        $(".box").slideDown();
    })
    // slideToggle([spped=0,callback])  滑动切换
    $("button").eq(11).click(function () {
        $(".box").slideToggle(1000, function () {
            console.log("折叠结束");
        });
    })



    // 淡入淡出效果
    // fadeOut([spped=0,callback])  淡出
    $("button").eq(12).click(function () {
        $(".box").fadeOut(1000)
    })
    // fadeIn([spped=0,callback])  淡入
    $("button").eq(13).click(function () {
        $(".box").fadeIn()
    })
    // fadeToggle([spped=0,callback]) 淡入淡出切换 
    $("button").eq(14).click(function () {
        $(".box").fadeToggle()
    })
    // fadeTo([spped=0,callback])  淡入或淡出到指定透明度
    $("button").eq(15).click(function () {
        $(".box").fadeTo(1000, 0.5)
    })

</script>

</html>